<template>
	<view class="content">

		<view class="d-kuan-juzhong d-beijing-hui3">
			<!--头部-->
			<view class="d-kuan pc-dingbu">
				<DToubu @login-success="handleLoginSuccess"></DToubu>
			</view>

			<!--头部-->
			<!--下面内容-->
			<view class="d-kuan d-buhuanhang">
				<!--左边导航-->
				<view class="d-daohang d-you-10" id="zuo-daohang" :style="{height: leftNavHeight}">
					<view class="d-daohang-5">
						<Ddaohang></Ddaohang>
					</view>





					<!-- 左边一级导航 -->
					<!--view class="d-daohang-zuo">
						<view 
    				    class="d-yiji"
					
    				    @click="yiji(0)"
    				  >
    				    首页
    				  </view>

    				  <view 
    				    v-for="(dao,index) in zhishi_daohang_list" 
    				    :key="index" 
    				    class="d-yiji"
    				    :class="{'active': activeIndex === dao.id}"
    				    @click="yiji(dao.id)"
    				  >
    				    {{ dao.name }}
    				  </view>
    				</view-->
    				<!-- 右边二级导航 -->
    				<!--view class="d-daohang-you" v-if="daohang.length > 0 && activeIndex >= 1">
    				  <view 
    				    v-for="(er,index) in erjidata" 
    				    :key="index" 
    				    class="d-erji"
						:class="{'active': erjiindex === er.id}"
    				    @click="erji(er.id)"
    				  >
    				    {{ er.name }}
    				  </view>
    				</view-->

				</view>
				<!--左边导航-->
				<!--右边内容-->
				<view class="d-kuan" style="margin-left: 520rpx">
					<uv-row customStyle="margin-bottom: 10px" :gutter="10">
						<uv-col span="8">
							<uv-row customStyle="margin-top: 10px;flex-wrap: wrap" :gutter="20" wrap>
								<uv-col v-for="(list,index) in zhishi_list" span="6"  >

									<view class="beijing-1 d-kuan d-buhuanhang d-xia-20" @click="zhishi(list.id)">
										<!--图片-->
										<view class="d-zuo d-tu-kuan-110 d-piaofu-0">
											<view v-if="list.moshi==0" class="d-piaofu-1">免费</view>
											<view v-else class="d-piaofu-1">付费</view>

											<uv-image :src="list.thumb" width="190rpx" height="240rpx" radius="10"></uv-image>
										</view>
										<view class="d-kuan d-neikuang-10">
											<view class="d-chaochu-1 d-jiacu">{{list.title}}</view>
											<view class="d-chaochu-2 d-ziti-14 d-wenzi-yanse-hui d-shangxia-5">
												{{list.description}}
											</view>
											<view class="d-chaochu-2 d-ziti-12 d-wenzi-yanse-hui d-shangxia-10">
												<uv-icon name="arrow-right" color="#a7a7a7" labelColor="#a7a7a7" size="12" :label="list.catname"></uv-icon>
											</view>
										    <view class="d-buhuanhang d-shangxia-10">
												<view class="d-baifen-50">
													<view class="d-zuo  d-chaochu-1 d-ziti-12 d-wenzi-yanse-hui ">
														共 {{ list.kecheng_total }} 讲
													</view>
												</view>
												<view class="d-baifen-50">
													<view class="d-you d-chaochu-1 d-ziti-12 d-wenzi-yanse-hui ">
														已有 {{ list.xuexi_tongji }} 加入学习
													</view>
    	                                        </view>
											</view>

										</view>
									</view>
								</uv-col>

							</uv-row>
							<!--内容-->
							<!--内容-->
						</uv-col>
						<uv-col span="4">
							123789789
						</uv-col>
					</uv-row>

				</view>
				<!--右边内容-->

			</view>
			<!--下面内容-->

		</view>
	</view>
</template>

<script>
    import Api from '@/utils/api.js';
	//var wxRequest_2 = require("../../utils/wxRequest.js");
	import { getRequest,postRequest } from '@/utils/wxRequest.js';
    //引入组件 d-toubu
    import DToubu from '@/components/d-toubu/d-toubu.vue'
	import Ddaohang from '@/components/d-daohang/d-daohang.vue'
	export default {
		data() {
			return {
				title: 'Hello',
				leftNavHeight: '500rpx', // 默认高度
				daohang: [
					{
						id:'1',
						name: '首页', 
						icon: 'home',

					},
					{
						id:'2',
						name: '心理学',
						icon: 'home',
						erji: [	
							{id: '2-1', name: '情绪管理'},
					    	{id: '2-2', name: '心理疗愈'},
					    	{id: '2-3', name: '行为心理学'}
						]
					},
					
				],
				erjidata:[],
				erjiindex:'',//当前激活的二级菜单索引
				activeIndex: -1, // 当前激活的一级菜单索引
				zhishi_daohang_list:[], // 知识导航列表
				zhishi_list:[], // 知识列表
			}
		},
		components: {
  		    DToubu,
			Ddaohang
  		},
		mounted() {
			//var m = this.$store.state;
			//console.log('mmmm',m);
			
    	    this.setLeftNavHeight();
    	    // 添加窗口大小变化监听
    	    window.addEventListener('resize', this.setLeftNavHeight);
    	},
    	beforeDestroy() {
    	    // 移除监听
    	    window.removeEventListener('resize', this.setLeftNavHeight);
    	},
		onShow() {
			//var m = this.$store.state;
			console.log('12300000:', this.$store.state.memberuid);
			this.zhishi_daohang_api();
			var e = this;
			this.zhishi_list_api(e);
		},
		onLoad() {
			
		},
		methods: {
			//首页
			shouye(){
				uni.navigateTo({
					url: '/pages/index/index',
					fail: (err) => {
						console.error('跳转失败:', err)
					}
				})
			},
			// ...其他方法保持不变...
			yiji(index) {
    		  // 切换激活的一级菜单
    		  this.activeIndex = index;
    		  // 根据激活的一级菜单显示对应的二级菜单
			  if(index == 0){
				  this.erjidata = [];
			  }else{
				  this.erjidata = this.zhishi_daohang_list[index].son;
			  }
			  const data = {
				  categories:index
			  }
			  this.zhishi_list_api(data);
    		  //this.erjidata = this.zhishi_daohang_list[index].son;
			  console.log(this.erjidata);
    		},
			erji(index) {
    		  // 切换激活的二级菜单
    		  this.erjiindex = index;

			  const data = {
				  categories:index
			  }
			  this.zhishi_list_api(data);
			  //console.log(index);

    		},
			toggleErji(index) {
    		  if (this.activeIndex === index) {
    		    // 点击已激活的菜单，收起二级菜单
    		    this.activeIndex = -1;
    		    this.currentErji = [];
    		  } else {
    		    // 点击新的菜单，显示对应的二级菜单
    		    this.activeIndex = index;
    		    this.currentErji = this.zhishi_daohang_list[index].erji;
    		  }
    		},
			setLeftNavHeight() {
        	    // 获取系统信息
        	    const systemInfo = uni.getSystemInfoSync();
        	    // 计算可用高度（可根据实际需求调整计算方式）
        	    const windowHeight = systemInfo.windowHeight;
        	    const headerHeight = 70; // 头部高度估计值
        	    const calculatedHeight = windowHeight - headerHeight;
				
        	    // 设置左边导航高度
        	    this.leftNavHeight = `${calculatedHeight}px`;
        	},
			zhishi(id){
				console.log(id);
				try {
  				  uni.navigateTo({
  				    url: '/pages/zhishi/index?id='+id,
  				    fail: (err) => {
  				      console.error('跳转失败:', err)
  				    }
  				  })
  				} catch (e) {
  				  console.error('跳转异常:', e)
  				}
			},
			
			handleLoginSuccess() {
  			  this.$forceUpdate();
  			},
			// 知识导航接口
			zhishi_daohang_api(){
				var get_data = getRequest(Api.getZhishi_daohang());
				var res;
				get_data.then(duixin_data => {
					res = duixin_data;
					if(res.data.code) {
						// 转换时间戳为日期格式
						//var list = res.data ? res.data.data : {};
						var list = res.data && res.data.data ? res.data.data : [];
						// 在 list 前面添加插入一个新的数据“首页”
						/*list.unshift({
            			    id: '0',
							pid: '0',
            			    name: '首页',
            			    icon: 'home',
            			    son: [] // 首页没有二级菜单
            			});*/
        				this.zhishi_daohang_list = list;
						console.log(list);
					} else {
						uni.showToast({
							icon: 'none',
							title: '获取失败，请稍后重试'
						});
					}
				})
			},
			zhishi_list_api(data){
				if (!data) data = {};
				if (!data) data = {};
		  		if (!data.page) data.page = 1;
		  		if (!data.categories) data.categories = 0;
		  		if (!data.search) data.search = '';
				var get_data = getRequest(Api.getZhishi_list(data));
				var res;	
				get_data.then(duixin_data => {
					res = duixin_data;	
					if(res.data.code) {
						// 转换时间戳为日期格式
						var list = res.data? res.data.data : {};
						this.zhishi_list = list;	
					} else {
						uni.showToast({
							icon: 'none',
							title: '获取失败，请稍后重试'
						});
					}
				})
			}

		}
	}
</script>

<style>

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		background-color: #f3f3f3;
		padding-top: 70px;
		height: calc(100vh - 70px); /* 添加全屏 */
		width: 100vw; /* 添加全屏*/

	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	/* 屏幕宽度大于786px时隐藏uni-page-head */
    @media (min-width: 786px) {
        uni-page-head {
            display: none !important;
            opacity: 0 !important;
            height: 0 !important;
            visibility: hidden !important;
        }
    }
	/*.d-daohang{
		
		width: 600rpx;
	}*/
	/* 添加在style部分 */
	.d-daohang-zuo {
    position: fixed;
    left: 0;
    
    width: 180rpx;
    height: calc(100vh - 70rpx);
    background: #f5f5f5;
    z-index: 100;
	box-shadow: 2px 0 5px rgba(177, 177, 177, 0.1);
  }
  
  .d-daohang-you {
    position: fixed;
    left: 180rpx;
    
    width: 180rpx;
    height: calc(100vh - 70rpx);
    background: #fff;
    z-index: 100;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .d-erji-item {
    height: 60rpx;
    line-height: 60rpx;
    padding: 0 20rpx;
   /* border-bottom: 1px solid #f0f0f0;*/
  }
  
  .d-erji-item:active {
    background: #f5f5f5;
  }

	
</style>
